import React, {PureComponent} from 'react';
import {
    Button,
    Platform,
    StyleSheet,
    Text,
    StatusBar,
    Image,
    FlatList,
    Dimensions,
    TouchableOpacity,
    View
} from 'react-native';

const {width: sw, height: sh} = Dimensions.get('window');

export default class ShopFlatListView extends PureComponent {

    constructor(props) {
        super(props);
        let data = [];
        for (let i = 0; i < 30; i++) {
            let r = i % 3;
            data.push({type: r == 0 ? 'image' : r == 1 ? 'video' : 'text'})
        }
        this.state = {
            sourceData: data,
            flatHeight: 200,
            refreshing: false,
            footShow: false,
        };
    }

    _keyExtractor = (item, index) => index + '';

    //上拉加载更多
    _onEndReached = () => {
        this._getNewsList();
    };

    //加载数据
    _getNewsList = () => {
    };

    //Footer视图
    _renderFooter = () => {
        let len = this.state.footShow;
        return (
            <View style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                height: len ? 40 : 0
            }}>
                <Image source={require('../../icon/i_loading.gif')} resizeMode={'contain'}
                       style={{width: 20, height: 20, marginRight: 5}}/>
                <Text style={{color: '#515151'}}>正在加载...</Text>
            </View>
        )
    };
    //分割线
    _renderItemSeparatorComponent = ({highlighted}) => {
        return (
            <View style={{height: 1, backgroundColor: '#e6e6e6'}}></View>
        )
    };

    //没有数据时候页面显示
    _renderEmptyView = () => {
        return (
            <View style={{
                height: this.state.flatHeight,
                backgroundColor: '#f8f8f8',
                justifyContent: 'center',
                alignItems: 'center',
                marginTop: 20
            }}>
                <Text style={{fontSize: 30}}>老板,没有找到数据</Text>
            </View>
        )
    };
    //设置item高度
    _setFlatListHeight = (e) => {
        let height = e.nativeEvent.layout.height;
        if (this.state.flatHeight < height) {
            this.setState({flatHeight: height})
        }
    };

    //下拉刷新
    _renderRefresh = () => {
        this.setState({refreshing: true}); //开始刷新
        this.currPage = 0;
        this._getNewsList();
        setTimeout(() => {
            this.setState({refreshing: false});
        }, 1000);
    };


    render() {
        return (
            <FlatList
                ref={ref => this.flatList = ref}
                data={this.state.sourceData}
                showsVerticalScrollIndicator={false}
                extraData={this.state.selected}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
                //初始加载的条数，不会被卸载
                initialNumToRender={10}
                //决定当距离内容最底部还有多远时候触发onEndReached回调，数值范围：0~1。例如：0.5表示可见布局的最底端距离content最底端等于可见布局一半高度的时候调用该回调
                onEndReachedThreshold={0.5}
                //当列表被滚动到距离内容最底部不足onEndReacchedThreshold设置的距离时调用此函数
                onEndReached={this._onEndReached}
                //ListHeaderComponent={this._renderHeader}
                ListFooterComponent={this._renderFooter}
                //分割线
                ItemSeparatorComponent={this._renderItemSeparatorComponent}
                ListEmptyComponent={this._renderEmptyView}
                onLayout={this._setFlatListHeight} //设置item高度
                //正在加载的时候设置为true，会在界面上显示一个正在加载的提示
                refreshing={this.state.refreshing}
                //如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
                onRefresh={this._renderRefresh}

                style={{marginTop:20}}
                numColumns={3} //宫格布局
                // columnWrapperStyle={{}}
                // horizontal={false}
            />
        )
    }

    _renderItem = ({item}) => {
        return (
            <FlatListItem
                item={item}
                onPressItem={this._onPressItem}
                selected={this.state.selected === item.id}
            />
        )
    };

    _onPressItem = (item) => {

        this.setState({
            selected: item.id
        });

        if (item['videoinfo']) {
            this.props.navigation.push('VideoDetail', {item});
            return
        }

        this.props.navigation.push('NewsDetail', {item})
    }
}


class FlatListItem extends React.PureComponent {
    _onPress = () => {
        this.props.onPressItem(this.props.item)
    };

    render() {
        return (
            <View style={{flexDirection: 'row'}}>
                <Image source={require('../../ad/ad03.jpg')} style={{
                    width: sw * 0.3,
                    height: sw * 0.2,
                    marginLeft: sw * 0.025,
                    marginTop: sw * 0.025,
                }}/>
            </View>
        );
    }
}
